<template>
  <div
  v-loading='loading'
    element-loading-text="欢迎来到花坞，点击进入首页"
    element-loading-spinner="el-icon-loading"
    class="index"

  >
    <header>
      <div class="div-login">
        <ul>
          <li v-if="!isExistUser">
            <router-link to="/login" tag="a">登录</router-link>/
            <router-link to="/register" tag="a">注册</router-link>
          </li>
          <li v-if="isExistUser">
            <span>{{user}}</span>,
            
          </li>
          <li v-if="isExistUser">
           
            <a href @click="del">注销</a>
          </li>
          <li>
            <router-link to="/index/about" tag="a"><i class="el-icon-user"></i>个人中心</router-link>
          </li>
          <li>
            <router-link to="/index/basket" tag="a"><i class="el-icon-shopping-cart-full"></i>购物车</router-link>
          </li>
        </ul>
      </div>

      <div id="nav">
        <el-row>
          <el-col :md="4" style="text-align:center">
              <div><img src="../assets/ff.png" alt /></div>
            
          </el-col>
          <el-col :md="20">
          <el-menu
            :default-active="activeIndex2"
            class="el-menu-nav"
            mode="horizontal"
            active-text-color="#ffd04b"
            :router="true"
          >
            <el-menu-item index="1" route="/index/home">首页</el-menu-item>
            <el-menu-item index="2" route="/index/flower">鲜花</el-menu-item>
            <el-menu-item index="3" route="/index/cake">蛋糕</el-menu-item>
            <el-menu-item index="4" route="/index/huazao">花皂</el-menu-item>
            <el-menu-item index="5" route="/index/xiangxun">香薰</el-menu-item>
            <el-menu-item index="6" route="/index/gift">礼品</el-menu-item>
            <el-submenu index="7">
              <template slot="title" class="taocan">套餐</template>
              <el-menu-item index="7-1" route="/index/day">七日花</el-menu-item>
              <el-menu-item index="7-2" route="/index/festival">节日套餐</el-menu-item>
              <el-menu-item index="7-3" route="/index/commercial">商务套餐</el-menu-item>
            </el-submenu>
          </el-menu>
          </el-col>
        </el-row>
      </div>
    </header>
    <el-main>
      
      <router-view></router-view>
    </el-main>
    <el-footer height="100px">
      <div class>
        <p class>客服电话：12345678900 服务时间（08:00-22:00）</p>
        <div class="footerNav">
          <p class>
            <a href='../../public/Notice.html'>公告</a>
            <a href="../../public/about.html">关于我们</a>
            <a href="../../public/contact.html">联系我们</a>
            <a href="../../public/technology.html">技术博客</a>
            <a href="../../public/Flower nursing.html">花卉护理</a>
            <a href @click.prevent="goToComment">评论</a>
            <a href="../../public/Promise.html">我们的承诺</a>
          </p>
        </div>
        <p class>copyright©2019花坞版权</p>
      </div>
    </el-footer>
  </div>
</template>

<script>
import jwt_decode from 'jwt-decode'
export default {
  data() {
    return {
      // activeIndex2: '1',
      isExistUser: false,
      user:'',
       loading: true
    };
  },
  computed: {
    activeIndex2: {
      get() {
        return this.$store.state.navIndex;
      },
      set(v) {
        this.$store.state.navIndex = v;
      }
    }
  },
  
  methods: {
    //   handleSelect(key, keyPath) {
    //     console.log(key, keyPath);
    //   }
    goToComment() {
      this.$router.push("/index/comment");
    },
    del:function(){
        localStorage.removeItem('mytoken')
    },
  },
  created(){
      
        var phone=jwt_decode(localStorage.getItem('mytoken')).phone
        this.$axios.get("http://localhost:3000/users/"+phone)
        .then(res=>{
          // console.log(res.data.data)
          this.$store.state.user=res.data.data
          console.log( this.$store.state.user)
          this.user=res.data.data[0].userName
            this.isExistUser=true;
        })
        .catch(err=>{
          console.log(err)
        })
        
      // }else{
      //     this.isExistUser=false;
      // }
      setTimeout(() => {
        this.loading=false;
        this.$router.push('/index/home')
      }, 2000);
  }
};
</script>

<style lang="scss" scoped>
.div-login,.nav,.footerNav,.el-menu-item,.taocan{
    font-family: "KaiTi"
}
.index{
  min-height: 770px;
}
a {
  text-decoration: none;
  color: #333;
}
header {
  width: 100%;
  border-bottom: 1px solid #ccc;
}
.div-login {
  font-size: 14px;
  width: 100%;
  height: 23px;
  line-height: 23px;
  background-color: #f9f9f9;
}
.div-login ul {
  float: right;
  width: 500px;
}
.div-login li {
  list-style: none;
  width: 75px;
  float: left;
  margin-left: 20px;
}
#nav {
  position: relative;
  // top:20px;
}
.el-menu-nav {
  width: 550px;
  margin: 0 auto;
}
.el-menu-item {
  font-size: 16px;
}
.el-col img {
  width: 217px;
  height: 60px;
}
.el-main {
  // background-color: #E9EEF3;
  color: #333;
  text-align: center;
}
.el-footer {
  background-color: #ebebeb;
  text-align: center;
  font-size: 14px;
  padding: 8px 0 0 0;
  letter-spacing: 1px;
}
.footerNav {
  padding: 10px 0;
}
.footerNav a {
  padding: 0 10px;
}
.footerNav a + a {
  border-left: 1px solid #666;
}
@media screen and (min-width:1300px){
    .el-col img{
      position: relative;
      left:200px;
    }
}
</style>